<template>
    <div class="user-line">
        <div class="left-box">
            <div class="avatar" style="--avatar: url(https://q4.itc.cn/q_70/images03/20241013/ee1444dfd7124947904b3c9c62efdece.jpeg)"></div>
            <div class="userinfo">
                <div class="say-hello">早上好！！！</div>
                <div class="user-name text-ellipsis">椰果林</div>
            </div>
        </div>
        <div class="right-box">
            <div class="btn icon"
                v-for="item in btn_list"
                :key="item.id"
                :style="`
                   --icon: url(${ base_url }${ item.icon });
                   --icon-size: ${ item.size };
                `"
            ></div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { base_url } from '@/server/config';

let btn_list = ref([
    { id: 1, icon: '/static/icon/search.svg', size: '60%' },
    { id: 2, icon: '/static/icon/bell.svg', size: '60%' }
]);
</script>

<style scoped lang="less">
.user-line {
    width: 100%;
    height: 20vw;
    box-sizing: border-box;
    padding: 5vw;
    display: flex;
    background-color: #fff;
    border-radius: 3vw;
}

.left-box {
    flex: 1;
    height: 100%;
    display: flex;
    gap: 2vw;

    .userinfo .say-hello {
        font-size: 3.5vw;
        color: #999;
    }

    .userinfo .user-name {
        max-width: 50vw;
        font-size: 4vw;
        color: #000;
    }
}

.right-box {
    width: 22vw;
    height: 100%;
    display: flex;
    gap: 2vw;

    .btn {
        --size: 10vw;
        width: var(--size);
        height: var(--size);
        background-color: #f5f5f5;
        border-radius: 50%;
        border: 0.1vw solid #ccc;
    }
}

</style>